:root{
	-green:#16a085;
	-black:#444;
	color:#777;
	-box-shadow:.5rem .5rem 0 rgba(22, 160, 133, .2);
	-text-shadow: .4rem .4rem 0 rgba(0, 0, 0, .2);
	-border: .2rem solid var(--green);

}

*{
	font-family: Baskerville, 'Palatino Linotype', Palatino, 'Century Schoolbook L', 'Times New Roman', 'serif';
	margin: 0; padding: 0;
	outline: none; border: none;
	text-transform: all .2s ease-out;
	text-decoration: none;
}
html{
	font-size: 62.5%;
	overflow-x: hidden;
	scroll-padding-top: 7rem;
	scroll-behavior: smooth;	
}


.header{
	padding: 2rem 9%;
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1000;
	box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .1);
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: white;
}
section{
	padding: 2rem 9%;
}
	
	section:nth-child(even){
		background: #c7c2c2;
	}
	
	.heading{
		text-align: center;
		padding-bottom: 2rem;
		text-shadow: var(-text-shadow);
		text-transform: uppercase;
		color: black;
		font-size: 5rem;
		letter-spacing: .4rem;
	}
	.heading span{
		text-transform: uppercase;
		color: green
	}
	
	.btn{
		margin-top: 1rem;
		padding: .5rem;
		padding-left: 3rem;
		border-radius: .5rem;
		box-shadow: var(black);
		color: greenyellow;
		cursor: pointer;
		font-size: 1.7rem;
		font-weight: bold;
		background: grey;
		box-shadow: #444;
		align-items: center;
		justify-content: center;
		text-align: center;
		
	}
	.content .btn{
		color: black;
		text-align: center;
		justify-content: center;
		align-items: center;
		padding-left: 10px;
		padding: .5rem;
	}

	.content .btn{
		background: lightseagreen;
		color: white;
	}

	.content .btn:hover{
		background: lightblue;
	}

	.content p{
		font-weight: 900;
		
	}

	.btn span{
		padding: .7rem;
		border-radius: .5rem;
		color: red;
		margin-left: .5rem;
	}
	
	.btn:hover{
		color: red;
		color: black;
	}
	.btn:hover span{
		color: green;
		margin-left: 1rem;
	}
	
.header .logo{
	font-size: 2.5rem;
	color: black;
}

.header .logo i{
	color: green;	
}
.header .navbar a{
	font-size: 1.7rem;
	color:black;
	margin-left: 2rem;
}
.header .navbar a:hover{
	color: green;
}
	#menu-btn{
		font-size: 2.5rem;
		border-radius: .5rem;
		background: white;
		color: green;
		padding: 1rem 1.5rem;
		cursor: pointer;
		display: none;
	}
	.home{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap:1.5rem;
		padding-top: 10rem;
	}
	.home .image{
		flex: 1 1 45rem;
	}
	.home .image img{
		width: 100%;
	}
	.home .content{
		flex: 1 1 45rem;
	}
	.home .content h3{
		font-size: 4.5rem;
		color: black;
		line-height: 1.8;
		text-shadow: var(-text-shadow);
	}
	.home .content h3{
		font-size: 4.5rem;
		color: black;
		line-height: 1.8;
		text-shadow: var(-text-shadow);
	}
	.home .content p{
		font-size: 1.7rem;
		color: black;
		line-height: 1.8;
		padding: 1rem 0;
	}
	.icons-container{
		display: grid;
		gap: 2rem;
		grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
		padding-top: 5rem;
		padding-bottom: 5rem;
	}
	.icons-container .icons{
		border: #AF0E10;
		box-shadow: var(-box-shadow);
		border-radius: .5rem;
		text-align: center;
		padding: 2.5rem;
	}
	.icons-container .icons i{
		font-size: 4.5rem;
		color: green;
		padding-bottom: .7rem;
	}
	
	.icons-container .icons h3{
		font-size: 4.5rem;
		color: black;
		padding: .5rem 0;
		text-shadow: var(--text-shadow);
	}
	.icons-container .icons p{
		font-size: 1.5rem;
		color: black;
	}
	.services .box-container{
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
		gap: 3.5rem;
	}
	.services .box-container .box{
		background: white;
		border-radius: .5rem;
		box-shadow: var(-box-shadow);
		border: var(-border);
		padding: 1.5rem;			
	}
	.services .box-container .box i{
		color: green;
		font-size: 5rem;
		padding-bottom: .5rem;
	}
	.services .box-container .box h3{
		color: black;
		font-size: 2.5rem;
		padding: 1rem 0;
	}
	.services .box-container .box p{
		color: black;
		font-size: 1.4rem;
		line-height: 2;
		padding: 10px -5rem;
		font-weight: 600;
		margin-bottom: 15px;
	}
	.about .row{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap:2rem;
		
		
	}
	.about .row .image{
		flex: 1 1 45rem;

	}
	.about .row .image .img{
		width: 100%
	}
	.about .row .content{
		flex: 1 1 45rem;
	}
	.about .row .content h3{
		color: black;
		font-size: 4rem;
		line-height: 1.8;
	}
	.about .row .content p{
		color: black;
		padding: 1rem 0;
		font-size: 1.6rem;
		line-height: 1.5;
		margin-bottom: 20px;
		
	}
	.about .row .content .btn{
		color: white;
		margin-bottom: 2rem;
		text-align: center;
		justify-content: center;
		align-items: center;
	}
	


	.about .row .content .text:hover{
		background: gray;
	}

	.about .row .content .btn:hover{
		background: black;

	}

	.about .row .content .text{
		background: lightseagreen;
		padding: 15px 20px;
		color: white;
		font-weight: bolder;
		font-size: 1.2rem;
		width: 5rem;
		margin-bottom: 15rem;
	}

	

	.doctors .box-container{
		display: grid;
		grid-template-columns: repeat(auto-fit,minmax(30rem, 1fr));
		gap:2rem;
	}
	
	.doctors .box-container .box{
		text-align: center;
		background: white;
		border-radius: .5rem;
		border: var(--border);
		box-shadow: var(-box-shadow);
		padding: 2rem;
		
		
	}
	.doctors .box-container .box img{
		height: 20rem;
		border: var(--border);
		border-radius: .5rem;
		margin-top: 1rem;
		margin-bottom: 1rem;
		
	}
	.doctors .box-container .box h3{
		color: black;
		font-size: 2.5rem;
		
	}
	.doctors .box-container .box span{
		color: green;
		font-size: 1.5rem;
	}
	.doctors .box-container .box .share{
		padding-top: 2rem;
	}
	.doctors .box-container .box a{
		height: 5rem;
		width: 5rem;
		line-height: 4.5rem;
		font-size: 2rem;
		color: green;
		border-radius: .5rem;
		border: var(--border);
		margin: .3rem;
	}
	.doctors .box-container .box .share a:hover{
		background: green;
		color: white;
	}
	
	.book .row{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap:2rem;
	}
	.book .row .image{
		flex: 1 1 45rem;
	}
	.book .row .image img{
		width: 100%;
	}
	
	.book .row form{
		flex: 1 1 45rem;
		background: white;
		border:var(--border);
		box-shadow: var(--box-shadow);
		text-align: center;
		padding: 2rem;
		border-radius: .5rem;
	}
	.book .row form h3{
		color: black;
		padding-bottom: 1rem;
		font-size: 3rem;
	}
	.book .row form .box{
		width: 100%;
		margin: .7rem 0;
		border-radius: .5rem;
		border: var(--border);
		font-size: 1.6rem;
		color: black;
		text-transform: none;
		padding: 1rem
	}
	.book .row form .btn{
		padding: 1rem 4rem;
	}
	
	.review .box-container{
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(927rem, 1fr));
		gap: 2rem;
	}
	
	.review .box-container .box{
		border-radius: .5rem;
		padding: 2.5rem;
		background: white;
		text-align: center;
		position: relative;
		overflow:hidden;
		z-index: 0;
	}
	.review .box-container .box img{
		height: 10rem;
		width: 10rem;
		border-radius: 50%;
		object-fit: cover;
		border: .5rem solid white;
	}
	
	
	.review .box-container .box h3{
		color: white;
		font-size: 2.2rem;
		padding: .5rem 0;
		
	}
	.review .box-container .box .stars i{
		color: white;
		font-size: 2.2rem;
		
		
	}
	.review .box-container .box .text{
		color: blue;
		line-height: 1.8;
		font-size: 1.6rem;
		padding-top: 4rem;
	}
	
	.review .box-container .box::before{
		content: "";
		position: absolute;
		top: -4rem; left: 50%;
		transform: translateX(-50%);
		background: green;
		border-bottom-left-radius: 50%;
		border-bottom-right-radius: 50%;
		height: 25rem;
		width: 120%;
		z-index: -1;
	}
	
	.blogs .box-container{
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
		gap: 2rem;
		height: 32rem;
		
		
	}
	#blogs{
		background: url(beautiful-shot-rocky-mountains-covered-with-white-snow.jpg);
		height: 50rem;
	}

	.blogs .btn{
		color: white;
		background-color: blue;
		position: absolute;
		padding: .5rem;
		margin-top: 20px;
		
		
	}

	.blogs .btn span{
		padding: .1px;
	}
	.blogs h3{
		color: white;
		margin-top: 8px;
	}
	
	.blogs .box-container .box{
		border: var(--border);
		box-shadow: var(--box-shadow);
		border-radius: .5rem;
		padding: 2rem;
		background: black;
		border-radius: 25px;
		height: 100%;
	}

	.blogs .content a{
		color: white;
		margin-left: -3px;
	}
	.blogs .content .btn{
		background: blue;
		margin-bottom: 15rem;
	}

	.blogs .box-container .box .image{
		height: 20rem;
		overflow: hidden;
		border-radius: 1.5rem;
	}
	.blogs .box-container .box .image img{
		height: 80%;
		width: 100%;
		object-fit: cover;
	}
	.blogs .box-container .box:hover .image img{
		transform:scale(1.2);
	}
	.blogs .box-container .box .content{
		padding-top: 1rem;
	}
	.blogs .box-container .box .content .icon{
		padding-top: 1rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.blogs .box-container .box .content .icon a{
		font-size: 1.4rem;
		color: blue;
	}
	.blogs .box-container .box .content .icon a:hover{
		color: green
	}
	.blogs .box-container .box .content .icon a i{
		padding-right: .5rem;
		color: green;
	}
	
	.blogs .box-container .box .content .h3{
		color: black;
		font-size: 1.5rem;
	}
	.blogs .box-container .box .content .icon p{
		color: black;
		font-size: 1.5rem;
		line-height: 1.8;
		padding: 1rem 0;
	}

	
	.footer .box-container{
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
		gap: 2rem;	
		
	}
	.footer .box-container .box h3{
		font-size: 2.5rem;
		color: black;
		padding: 1rem 0;
		
	}
	.footer .box-container .box a{
		display: block;
		font-size: 1.5rem;
		color: black;
		padding: 1rem 0;
	}

	.footer .box-container .box a:hover{
		color: blueviolet;
	}
	
	.footer .box-container .box a i{
		padding-right: .5rem;
		color: green;
		
	}
	.footer .box-container .box a:hover{
		padding-right: 2rem;
	}
	
	.footer .credit{
		padding: 1rem;
		padding-top: 2rem;
		margin-top: 2rem;
		text-align: center;
		font-size: 2rem;
		color: green;
		border-top: .1rem solid black;
		
	}
	
	.footer .credit span{
		color:black;
	}
		
	
@media (max-width:991px){
	html{
	font-size: 90%;	
}
	.header{
		padding: 2rem;
	}
	.header .navbar{
		position: absolute;
		top: 115%; right: 2rem;
		border-radius: .5rem;
		box-shadow: var(-box-shadow);
		width: 30rem;
		border: var(-border);
		background: white;
		transform: scale(0);
		opacity:0;
		transform-origin: top right;
		transition: none;
			
	}
	.header .navbar .active{
		transform: scale(1);
		opacity: 1;
		transition: .2s ease-out;
	}
	.header .navbar a{
		font-size: 2rem;
		display: block;
		margin: 2.5rem;
	}
	.header #menu-btn{
		background: red;
	}
	.about img{
		width: 65%;
		margin-left: 160px;
		height: 300px;
	}
	
	section{
		padding: 2rem;
	}
	.icons-container .icons{
		background: gainsboro;
		display: block;
		
	}
	.icons-container .icons h3{
		font-size: 50px;
	}
	.blogs .box-container{
		height: 10rem;
		
	}
	.blogs img{
		height: 100rem;
		background: red;
	}
	
	
	.blogs .box-container .box{
		background: gray;
		padding: 25px;
		gap: 50px;
		border-radius: 50px;
		
	}
	.blogs .box-container .box .btn{
		border-radius: 25px;
	}
	.blogs h1{
		color: white;
	}
	#blogs{
		height: 80rem;
	}
	
	
}


@media (max-width:768px){
	#menu-btn{
		display:initial;
	}
	.content .btn{
		background: red;
		margin-left:20rem;
		padding: 13px;
	}
	
	.services .box-container .box{
		margin-left: 6.5rem;
		background: #444;
		width: 70%;
	}
	.services .box-container .box h3{
		color: white;
		margin-left: 5rem;

	}
	.services .box-container .box p{
		color: white;
		margin-left: 5rem;

	}
	.services .box-container .box .btn{
		margin-left: 5rem;

	}
	.about .row .content h3{
		font-size: 25px;
	}
	.about .row .content .text{
		background: red;
		border-radius: 15px;
		color: white;
		font-size: 13px;
		margin-left: 18rem;
	}
	.doctors .box img{
		width: 85%;
	}
	.blogs .box-container {
		background: white;
		padding: 1px;
		height: 20rem;
	}
	#blogs{
		height: 100rem;
		
	}

	#blogs .btn{
		background: blue;
		margin-top: -52px;
		padding: 10px;
	}
	
	
	
}
@media (max-width:450px){
	html{
	font-size: 50%;	
	}
	
	
}